<template>
		<!-- 非DTP -->
		<view v-if="data['taskType'] !== '1' && data['taskType'] !== '5'" class="item" :class="[type, data['allotType'] === '2'? 'invite' : '']">
			<u-row class="row-1" gutter="16">
				<u-col span="5">
					<text class="title">{{data['orderTypeCh']}}</text>
					<text class="type">{{data['qualityGradeCh'].slice(0,3)}}</text>
				</u-col>
				<u-col span="7" text-align="right">
					<text class="time">{{data['requireTime'] | sliceTime}}前返稿</text>
				</u-col>
			</u-row>
			<u-row class="row-2" gutter="16">
				<u-col span="7">
					<text class="sub-title">{{data['sourceLanCh']}}-{{data['targetLanCh']}}</text>
				</u-col>
				<u-col span="5" text-align="right">
					<text class="price">{{data['currencyType'] | formatMoneyTypeEn}}<text>{{parseInt(data['unitPrice'])}}</text>千字</text>
				</u-col>
			</u-row>
			<u-row class="row-3" gutter="16">
				<u-col span="7">
					<text class="number">NO.{{data['taskId']}}</text>
				</u-col>
				<u-col span="5" text-align="right">
					<text class="workload">实际翻译约{{data['workLoad'] || data['ratioWords']}}字</text>
				</u-col>
			</u-row>
			<u-row :class="hidden" gutter="16">
				<u-col span="12">
					<text class="sub-title">{{data['domainCh']}}</text>
				</u-col>
				<u-col span="12">
					<text class="sub-title">结算时间：{{data['settleTime'] || data['jsTimeQuery'] || '--'}}</text>
				</u-col>
			</u-row>
			<!--   进行中  -->
			<u-row v-if="!type" gutter="16">
				<u-col span="12" class="progress">
					<u-line-progress
						active-color="#25E6E9" 
						:show-percent="false"
						striped-active
						height="16"
						:percent="data['transSchedule'] | progress"
					></u-line-progress>
					<text>{{data['transSchedule'] | progress}}%</text>
				</u-col>
				<u-col span="12" class="operate" text-align="center" @click="more">
					<text>{{moreTxt}}</text>
					<u-icon :name="arrow" color="#19B1B8" size="24"></u-icon>
				</u-col>
			</u-row>
			<u-row v-else gutter="16">
				<u-col span="5" class="operate" @click="more">
					<text>{{moreTxt}}</text>
					<u-icon :name="arrow" color="#19B1B8" size="24"></u-icon>
				</u-col>
				<!--  已完成  -->
				<u-col v-if="type === 'item-ed'" span="7" text-align="right">
					<text>总金额：</text>
					{{data['currencyType'] | formatMoneyTypeEn}}<text class="total">{{data['totalPrice'] || '--'}}</text>
				</u-col>
				<u-col v-else span="7" text-align="right"> <!-- 退改/终止 -->
					<text class="reason">{{data['taskStatusCh']}}</text>
				</u-col>
			</u-row>
		</view>
		<!-- DTP -->
		<view v-else class="item dtp" :class="[type, data['allotType'] === '2'? 'invite' : '']">
			<u-row class="row-1" gutter="16">
				<u-col span="5">
					<text class="title">{{data['taskTypeCh']}}</text>
				</u-col>
				<u-col span="7" text-align="right">
					<text class="time">{{data['requireTime'] | sliceTime}}前返稿</text>
				</u-col>
			</u-row>
			<u-row class="row-2" gutter="16">
				<u-col span="7">
					<text class="sub-title">{{data['sourceLanCh']}}-{{data['targetLanCh']}}</text>
				</u-col>
				<!-- 进行中/退稿终稿 -->
				<u-col v-if="type === '' || type === 'item-be'" span="5" text-align="right">
					<text class="price">{{data['currencyType'] | formatMoneyTypeEn}}<text>{{parseInt(data['unitPrice'])}}</text></text>
				</u-col>
			</u-row>
			<u-row class="row-3" gutter="16">
				<u-col span="7">
					<text class="number">NO.{{data['taskId']}}</text>
				</u-col>
			</u-row>
			<u-row :class="hidden" gutter="16">
				<u-col span="12">
					<text class="sub-title" v-for="(dtp, idx) of dtps" :key="idx">{{dtp}}</text>
				</u-col>
				<u-col span="12">
					<text class="sub-title">结算时间：{{data['settleTime'] || data['jsTimeQuery'] || '--'}}</text>
				</u-col>
			</u-row>
			<!-- 进行中 -->
			<u-row v-if="!type" gutter="16">
				<u-col span="12" class="progress">
					<u-line-progress
						active-color="#25E6E9" 
						:show-percent="false"
						striped-active
						height="16"
						:percent="data['transSchedule'] | progress"
					></u-line-progress>
					<text>{{data['transSchedule'] | progress}}%</text>
				</u-col>
				<u-col span="12" class="operate" text-align="center" @click="more">
					<text>{{moreTxt}}</text>
					<u-icon :name="arrow" color="#19B1B8" size="24"></u-icon>
				</u-col>
			</u-row>
			<u-row v-else gutter="16">
				<u-col span="5" class="operate" @click="more">
					<text>{{moreTxt}}</text>
					<u-icon :name="arrow" color="#19B1B8" size="24"></u-icon>
				</u-col>
				<!-- 已完成 -->
				<u-col v-if="type === 'item-ed'" span="7" text-align="right">
					<text>总金额：</text>
					{{data['currencyType'] | formatMoneyTypeEn}}<text class="total">{{data['totalPrice'] || '--'}}</text>
				</u-col>
				<u-col v-else span="7" text-align="right"><!-- 退稿/终稿 -->
					<text class="reason">{{data['taskStatusCh']}}</text>
				</u-col>
			</u-row>
		</view>
</template>

<script>
	export default {
		props: ['data', 'type'],
		data (){
			return {
				hidden: 'hidden',
				moreTxt: '查看更多信息',
				arrow: 'arrow-down',
				dtps: []
			}
		},
		created (){
			// dtp
			if(this.data['taskType'] === '1' || this.data['taskType'] === '5'){
				this.dtps = Object.freeze(this.data['orgWords'].split(',').map((item) => {
					return item.replace(';', ' ').replace(';', '张 ') + '元/张'
				}))
			}
		},
		filters: {
			progress: (p) => {
				if(p && p !== 'null'){
					return Number(p)
				}else{
					return 0
				}
			}
		},
		methods: {
			more() {
				if(this.hidden){
					this.hidden = ''
					this.moreTxt = '收起'
					this.arrow = 'arrow-up'
				}else{
					this.hidden = 'hidden'
					this.moreTxt = '查看更多信息'
					this.arrow = 'arrow-down'
				}
			}
		}
	}
</script>
